<template>
 <div class="home-container">
     <div class="chart-swipe">
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
              <img src="@/images/banner1.webp" alt="">
            <!-- <div class="chart-box" ref="pieNode"></div> -->

          </van-swipe-item>
          <van-swipe-item>
            <!-- <div class="chart-box" ref="lineNode2"></div> -->
                       <img src="@/images/banner2.webp" alt="">

          </van-swipe-item>

        </van-swipe>
     </div>
                 <div class="middle">
              <div class="shell" v-for="(i,index) in list" :key="index">
                <div class="items" v-for="l in i.items" :key="l.id" @click="toPage(l)">
                 <i v-html="l.icon"></i>
                 <span>{{l.name}}</span>
                </div>

              </div>

          </div>
 </div>
</template>
<script>
// import echarts from 'echarts'
import {} from '@/Apis/homeApi'
export default {
  name: 'index',
  data () {
    return {
      chart: null,
      list: [
        {
          title: '基础数据',
          items: [
            { id: 'SYSTEM-01-05', path: '/product/list', name: '高锰酸钾制氧', icon: '&#xe64d;', right: 'R' },
            { id: 'SYSTEM-01-06', path: '/product/edit', name: '仪器管理', icon: '&#xe60f;', right: 'C' }

          ]
        },
        {
          title: '',
          items: [{ id: 'SYSTEM-01-07', path: '/supplier/list', name: '资源管理', icon: '&#xe63d;', right: 'R' },
            { id: 'SYSTEM-01-08', path: '/supplier/edit', name: '资源新建', icon: '&#xe603;', right: 'C' }]
        },
        {
          title: '项目管理',
          items: [
            { id: 'PROJECT-01-01', name: '项目管理', path: '/project/list', icon: '&#xe637;', right: 'R' },
            { id: 'PROJECT-01-02', name: '项目新建', path: '/project/edit', icon: '&#xe640;', right: 'C' }
          ]
        },
        {
          title: '采购管理',
          items: [
            { id: 'PURCHASE-01-01', name: '材料管理', icon: '&#xe7b1;', path: '/purchase/list', right: 'R' },
            { id: 'PURCHASE-01-02', name: '材料新建', icon: '&#xe69f;', path: '/purchase/edit', right: 'C' }
          ]
        },
        {
          title: '收货管理',
          items: [
            { id: 'RECEIVING-01-01', name: '设备管理', icon: '&#xe799;', path: '/recevie/list', right: 'R' },
            { id: 'RECEIVING-01-02', name: '设备新建', icon: '&#xe782;', path: '/recevie/edit', right: 'C' }
          ]
        }

      ]
    }
  },
  mounted () {
    // this.chart = echarts.init(this.$refs.pieNode)
    // this.renderPie()
  },
  methods: {
    toPage (menu) {
      this.$router.push(menu.path)
    }
    // renderPie () {
    //   const option = {
    //     backgroundColor: '#08B0F9',
    //     title: [{
    //       text: 'AQI指数',
    //       bottom: '300',
    //       x: 'center',
    //       borderColor: '#fff',
    //       borderWidth: 1,
    //       borderRadius: 15,
    //       padding: [7, 14],
    //       textStyle: {
    //         fontWeight: 'normal',
    //         fontSize: 12,
    //         color: '#fff'
    //       }
    //     }],
    //     angleAxis: {
    //       show: false,
    //       max: 100 * 360 / 270, // -45度到225度，二者偏移值是270度除360度
    //       type: 'value',
    //       startAngle: 225, // 极坐标初始角度
    //       splitLine: {
    //         show: false
    //       }
    //     },
    //     barMaxWidth: 14, // 圆环宽度
    //     radiusAxis: {
    //       show: false,
    //       type: 'category'
    //     },
    //     // 圆环位置和大小
    //     polar: {
    //       center: ['50%', '50%'],
    //       radius: '180'
    //     },
    //     series: [{
    //       type: 'bar',
    //       data: [{ // 上层圆环，显示数据
    //         value: 75,
    //         itemStyle: {
    //           color: { // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
    //             type: 'linear',
    //             x: 0,
    //             y: 0,
    //             x2: 1, // 从左到右 0-1
    //             y2: 0,
    //             colorStops: [{
    //               offset: 0,
    //               color: '#D1E4FE'
    //             }, {
    //               offset: 1,
    //               color: '#F9FFFE'
    //             }]
    //           }
    //         }
    //       }],
    //       barGap: '-100%', // 柱间距离,上下两层圆环重合
    //       coordinateSystem: 'polar',
    //       roundCap: true, // 顶端圆角从 v4.5.0 开始支持
    //       z: 2 // 圆环层级，同zindex
    //     },
    //     { // 下层圆环，显示最大值
    //       type: 'bar',
    //       data: [{
    //         value: 100,
    //         itemStyle: {
    //           color: '#80B8FF'
    //         }
    //       }],
    //       barGap: '-100%',
    //       coordinateSystem: 'polar',
    //       roundCap: true,
    //       z: 1
    //     },
    //     // 仪表盘
    //     {
    //       name: 'AQI',
    //       type: 'gauge',
    //       startAngle: 225, // 起始角度，同极坐标
    //       endAngle: -45, // 终止角度，同极坐标
    //       axisLine: {
    //         show: false
    //       },
    //       splitLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLabel: {
    //         show: false
    //       },
    //       splitLabel: {
    //         show: false
    //       },
    //       pointer: {
    //         show: false
    //       },
    //       title: {
    //         offsetCenter: [-20, -10],
    //         color: '#FFFFFF',
    //         fontSize: 60,
    //         fontWeight: 500,
    //         rich: {
    //           a: {
    //             fontWeight: 'normal',
    //             fontSize: 16,
    //             color: '#FFF',
    //             padding: [0, 0, 10, 40]
    //           }
    //         }
    //       },
    //       detail: {
    //         formatter: function (e) {
    //           return '良'
    //         },
    //         color: '#fff',
    //         fontSize: 16,
    //         offsetCenter: [40, -15],
    //         backgroundColor: '#FCC841',
    //         borderRadius: 8,
    //         padding: [4, 12]
    //       },
    //       data: [{
    //         value: 75,
    //         name: 75 + '\n' + '{a|' + '首要污染物：PM10' + '}'
    //       }]
    //     }
    //     ]
    //   }
    //   this.chart.setOption(option)
    // }
  }
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.home-container{
  .common;
      .chart-swipe {
        display: block;
        height: 150px;
        margin-bottom:24px;
    }
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;

    text-align: center;

    .chart-box{
      display:block;
      position:relative;
      height:100%;

    }
    img{
      height:159px;
      width:100%;
    }
  }

  .middle{
   display:flex;
   flex-direction: column;

    background-color:rgba(255,255,255,.5);
    width:90%;
    margin:0 auto;
    .shell{
    display:flex;
    justify-content: space-between;
    align-items: center;
  .items{
    display:flex;
    border:1px solid @c1;
    justify-content: space-around;
    align-items: center;
    width:50%;
    height:70px;

    font-size:.8rem;
    i{
      .EDM-font;
    }
  }
    }

  }

}
</style>
